import "./style.scss";
import { Card, Col, Row } from "antd";
import ConfirmIcon from "@/assets/photos/confirm-icon.png";
import DownIcon from "@/assets/icons/down-icon.png";

import { useTranslation } from "react-i18next";
import DraggableCarousel from './Draggable';

const SixthHomePage = () => {
    const { t } = useTranslation();

    return (
        <div className="sixth-home-page-pc">
            <Row className="row-one">
                <Col xs={24} sm={24} md={24} lg={12} xl={12} className={"left"}>
                    <div className="title">{t("TransparentText")}</div>
                    <div className="subtitle"> {t("5s")}</div>
                    <div className="confirm-content">
                        <img src={ConfirmIcon} alt="" />
                        <div className="content">
                            <div className="mainText"> {t("txt1")}</div>
                            <div className="detail"> {t("txt2")}</div>
                        </div>
                    </div>
                    <div className="confirm-content">
                        <img src={ConfirmIcon} alt="" />
                        <div className="content">
                            <div className="mainText"> {t("txt3")}</div>
                            <div className="detail"> {t("txt4")}</div>
                        </div>
                    </div>
                </Col>
                <Col xs={24} sm={24} md={24} lg={12} xl={12} className="right">
                    <Card>
                        <div className="card-content">
                            <div>{t("WhenToGet")}</div>
                            <img src={DownIcon} alt="" />
                        </div>
                    </Card>
                    <Card>
                        <div className="card-content">
                            <div>{t("HowToSeeBalance")}</div>
                            <img src={DownIcon} alt="" />
                        </div>
                    </Card>
                    <Card>
                        <div className="card-content">
                            <div>{t("WhatsFee")}</div>
                            <img src={DownIcon} alt="" />
                        </div>
                    </Card>
                    <Card>
                        <div className="card-content">
                            <div>{t("HowLongToGet")}</div>
                            <img src={DownIcon} alt="" />
                        </div>
                    </Card>
                    <Card>
                        <div className="card-content">
                            <div>{t("HowsSecurity")}</div>
                            <img src={DownIcon} alt="" />
                        </div>
                    </Card>
                </Col>
            </Row>
            <DraggableCarousel />
        </div>
    );
};

export default SixthHomePage;
